

<!--
props:
    config:        //  el-table 配置   如
        {
            size: 'small',
            'tooltip-effect': 'dark',
            'show-summary': true,
            'summary-method': this.getSummaries
        }
    columnConfig:  //  column配置：
        [
            { dataCode: 'index', align: 'center' },       // 序列号   可无 
            { dataCode: 'selection', align: 'center' },   // 选择项   可无  搭配事件 selectionChange
            { label: '操作', dataCode: 'act'},            // 操作项   可无
            { label: '日期',       // label 表列title   必
                dataCode: 'date',   // dataCode  data展示项   必
                width: 160          // width 列属性   非必需填
                'min-width': 100    // width 列属性   非必需填     (带'-'的属性  需要用''括起来。下同)
                fixed: 'true|left|right'                     //  fixed 列属性 非必需填   列是否固定在左侧或者右侧，true 表示固定在左侧
                'header-align': 'left|center|right'          // header-align 列属性  列头对齐方式  非必需填
                align: 'left|center|right'                   // header-align 列属性  列内容对齐方式  非必需填   默认： left
                sortable: 'true|false| 'custom''                       // sortable 列属性   非必需填    是否可以排序     搭配事件 sortChange
                'show-overflow-tooltip': true
                ... 等等   属性同 el-table 官网2.15 版本
            },
        ],
    data:

event:
    selectionChange:  // 选择事件    []
    sortChange:       // 排序事件  e: {order : 'ascending|descending|null', prop: columnConfig.dataCode }
    clickRow: 

使用:
  \Table :columnConfig="tableColumnConfig" :data="dataList" @selectionChange @sortChange>
        // 默认展示如下（页面不写下面内容， Table组件默认展示）  如有自定义数据展示 则：
        \template #date="{row}">     //    data :  columnConfig中的 dataCode    row： 行数据
            \p>{{row.date}}-----\/p>   //   自定义数据展示    
        \/template>

-->

<template>
    <div class="table-comp">
        <!-- <el-table :data="dataObj.tableData" style="width: 100%">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table> -->

        <el-table class="table-comp-table" v-loading="loading" :key="configKey"
            :element-loading-text="controlSto.language == 1 ? 'loading...' : '正在加载中...'"
            :data="data"  :border="config && config.isnborder ? false : true" v-bind="{...config}"
            :empty-text="emptyTxt"
            :element-loading-spinner="svg"
            @selection-change="handleSelectionChange"
            @sort-change="handleSortChange"
            @row-click="clickRow"
            :header-cell-class-name="cellClassName"
            :cell-class-name="cellClassName"
            style="width: 100%">
            <template v-for="colItem in columnConfig">
                <el-table-column v-if="colItem.dataCode == 'index'" :key="colItem.dataCode"
                    type="index" v-bind="{...colItem}" :label="delaLable(colItem)"
                    :align="colItem.align || 'left'"
                    :index="(i) => i + 1" :width="colItem.columnWidth">
                </el-table-column>

                <el-table-column v-else-if="colItem.dataCode == 'selection'" :key="colItem.dataCode"
                    type="selection" v-bind="{...colItem}" :label="delaLable(colItem)"
                    :align="colItem.align || 'left'"
                    :width="colItem.columnWidth">
                </el-table-column>

                <el-table-column v-else :key="colItem.dataCode"
                    v-bind="{...colItem}" :label="delaLable(colItem)" :prop="colItem.dataCode"
                    :header-align="colItem['header-align'] || 'left'"
                    :align="colItem.align || 'left'"
                    :width="colItem.columnWidth"
                >
                    <template #default="scope">
                        <slot :name="colItem.dataCode" v-bind="{row: scope.row}">
                            <template v-if="!isEmpty(scope.row[colItem.dataCode])">
                                <el-tooltip placement="top" :content="scope.row[colItem.dataCode]" v-if="scope.row[colItem.dataCode] && scope.row[colItem.dataCode].length > 20">
                                    <p class="herb-jump-name" v-if="colItem.dataCode != 'act'" :class="{'tool-tip-cell-box': colItem['show-overflow-tooltip']}">{{scope.row[colItem.dataCode]}}</p>
                                </el-tooltip>
                                <div v-else>
                                    <p v-if="colItem.dataCode != 'act'" :class="{'tool-tip-cell-box': colItem['show-overflow-tooltip']}">{{scope.row[colItem.dataCode]}}</p>
                                </div>
                            </template>
                        </slot>
                    </template>
                </el-table-column>
            </template>
            <template #empty>
                <div class="no-data-box">
                    <img :src="NodtaPng" v-if="!loading"/>
                    <div class="no-data-txt" v-if="!loading" v-lang="{lang: controlSto.language, lgid: '-118'}">暂无数据</div>
                </div>
            </template>
        </el-table>
    </div>
</template>

<script setup>
    import { ref, reactive, toRefs, computed } from 'vue'
    import { isEmpty, langTxt, geneMathHash } from '@/utils/util'
    import { controlStore } from '@/stores/control'
    import NodtaPng from '@/assets/img/noData.png'

    const emitter = defineEmits(['selectionChange', 'sortChange', 'clickRow']);
    const controlSto = controlStore();
    const props = defineProps({
        columnConfig: {
            type: Array,
            default: () => []
        },
        data: {
            type: Array,
            default: () => []
        },
        config: {
            type: Object,
            default: () => {
                return {
                    size: 'small',
                    'tooltip-effect': 'dark',
                    'highlight-current-row': true,
                    stripe: true,
                    'header-cell-style': {background:'#F5F7FA', color:'#333'},
                }
            }
        },
        loading: {
            type: Boolean,
            default: true
        }
    });
    const { columnConfig, data, config, loading } = toRefs(props);

    const configKey = computed(()=> {
        let arr = columnConfig.value.map(i => i.dataCode);
        return geneMathHash(arr.join(','));
    });
    const emptyTxt = computed(() => {
		return langTxt(controlSto.language, '-64');
	});

    const delaLable = (item) => {
        let str = item.label || '';
        if(item.langkey) {
            if(item.langkey < 0) {
                str = langTxt(controlSto.language, item.langkey);
            } else {
                str = langTxt(controlSto.language, item.langkey, controlSto.langList);
            }
        }
        return str;
	};


    // const geneMathHash = (str,caseSensitive) => {
    //     if(!caseSensitive){
    //         str = str.toLowerCase();
    //     }
    //     var hash  =   1315423911,i,ch;
    //     for (i = str.length - 1; i >= 0; i--) {
    //         ch = str.charCodeAt(i);
    //         hash ^= ((hash << 5) + ch + (hash >> 2));
    //     }
    //     return  (hash & 0x7FFFFFFF);
    // };
    const cellClassName = ({row, column, rowIndex, columnIndex}) => {
        return column.property + '-cell-box';
    };
    const handleSelectionChange = (e) => {
        emitter('selectionChange', e);
    };
    const handleSortChange = (e) => {
        emitter('sortChange', e);
    };
    const clickRow = (row, column, event) => {
        emitter('clickRow', row);
    }

</script>


<style lang="scss" scoped>
    .table-comp {
        .no-data-box {
            width: 100%;
            height: 264px;
            text-align: center;
            position: relative;
            img {
                margin-top: 20px;
            }
            .no-data-txt {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #BC9F77;
                line-height: 20px;
                text-align: center;
                font-style: normal;
                position: absolute;
                width: 100%;
                bottom: 60px;
            }
        }
        .tool-tip-cell-box {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .table-comp-table {
            :deep() {
                th.el-table__cell {
                    padding: 12px 0;
                }
                td {
                    padding: 0;
                    .cell {
                        padding: 0 !important;
                        >div, >p {
                            // display: inline-block;
                            padding: 10px;
                            // width: calc(100% - 20px);
                        }
                        .tool-tip-cell-box {
                            display: inline;
                        }
                        .el-table__expand-icon {
                            padding: 0;
                            margin-right: -10px;
                        }
                        .el-table__placeholder {
                            width: 0;
                        }
                    }
                }
                td.is-leaf {
                    padding: 6px 10px;
                }
                tr.el-table__row--striped td.el-table__cell {
                    background-color: #FFF;
                }
                tr.current-row > td.el-table__cell {
                    background-color: #F7F3EE;
                }
                tr.el-table__row--striped.current-row td.el-table__cell {
                    background-color: #F7F3EE;
                }
                tr:hover > td.el-table__cell {
                    background-color: #FCFCFC;
                }
            }
            .herb-jump-name {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
        .act-td-box {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            align-content: flex-start;
            column-gap: 1%;
            &::before, &::after {
                content: '';
                display: block;
            }
            .el-button {
                margin: 1px 0;
            }
        }
    }
</style>


<style>
.el-loading-spinner {
    position: relative;
    width: 180px;
    height: 180px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("@/assets/img/loading.gif");
    background-size: 100% 100%;
}
.el-loading-text {
    position: absolute;
    bottom: 20px;
    text-align: center;
    width: 100%;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px !important;
    color: #BC9F77 !important;
    line-height: 20px;
    font-style: normal;
}
svg.circular {
    display: none !important;
}
.el-loading-mask {
    background: rgba(255,255,255,0.7);
}
</style>
